<head>
  <title>example-app</title>
</head>

<body>
</body>

<template name="layout">
  {{> header}}

  {{> yield}}

  <div id="log"></div>
</template>

<template name="layout_no_header">
  {{> yield}}

  <div id="log"></div>
</template>

<template name="signin">
  <div class="signin">
    <div class="login-form">
      <h1>Sign In</h1>
      {{> loginButtons}}
    </div>

    <div class="example-users">
      <p>Normal User: normal@example.com | apple1</p>
      <p>View Secrets: view@example.com | apple1</p>
      <p>Manage Users: manage@example.com | apple1</p>
      <p>Admin User: admin@example.com | apple1</p>
    </div>
  </div>
</template>

<template name="loading">
  <h1>Loading...</h1>
</template>

<template name="awaiting-verification">
  <h1>Awaiting email verification...</h1>
</template>

<template name="not_found">
  <h3>404 - Not found</h3>
</template>

<template name="invalid-access">
  <h3>403 Forbidden - Invalid Access</h3>
</template>

<template name="header">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="/">Roles Example App</a>
        <div class="nav-collapse collapse">
          <ul class="nav">

            <li><a href="/start">Start Page</a></li>

            {{#if isInRole 'admin,view-secrets'}}
            <li><a href="/secrets">Secrets</a></li>
            {{/if}}

            <li class="dropdown pull-right">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{displayName}}<b class="caret"></b></a>
              <ul class="dropdown-menu">
                {{#if isInRole 'admin,manage-users'}}
                <li><a href="/manageUsers">Manage Users</a></li>
                {{/if}}
                <li><a class="signout" href="/signout">Sign out</a></li>
              </ul>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<template name="noteOfTheDay">
<p>Note of the day: {{note}}</p>
</template>

<template name="start">
  <div class="page row">
    <div class="offset4 span8">

      <p class="note">All logged-in users will see this page in their header nav.</p>

      <h2>Start Page</h2>

      {{> noteOfTheDay}}

      <div>
        <p>This application is an example app for the <a href="https://github.com/Meteor-Community-Packages/meteor-roles"><em>meteor-roles</em></a> smart package.</p>
      </div>

      {{> securityNote}}
    </div>
  </div>
</template>

<template name="securityNote">
  <div class="security-note">
    <p>SECURITY NOTE: It is important to distinguish between templates and data since, like all Meteor applications, every template is sent to all connected clients whereas data can be selectively published server-side.</p>
    <p>This is currently how Meteor is designed to work and is not a problem as long as you are aware that the raw template content is not actually 'secure'. Anyone can see any template by manually looking through the bundled client.js file. It won't be very pretty but it is possible. So for now don't put sensitive information in templates!</p>
    <p>You can see this in action by manually going to '/secrets'.  Unauthorized users will still be able to see the page but the secret data will not be displayed.  In a production system, you should add a Roles check to your Router's definition of the 'secrets' route but even then the raw template data is still sent to the user's browser.</p>
    <p>There is a <a href="https://trello.com/c/Lz07fBAm" target="_blank">feature card</a> on the Meteor team's Road Map which covers both server-side rendering and serving templates on-demand to the client so once that lands, the security restrictions may not need to be so tight.</p>
    <p>Sensitive data needs to be restricted on the server-side and only published to the client if the currently logged-in user has the proper permissions. See server.js for an example.</p>
    <p>To test server-side publishing rules, in your browser console try, 'Meteor.secrets.findOne()'. Unauthorized users will see 'undefined'.</p>
  </div>
</template>
